<template>
  <input type="text" class="input"
  :value="textCont"
  @input="handleInput($event)"
  @blur="handleBlur"
  @click="inputClick"
  >
</template>

<script setup>
const props = defineProps({
  textCont: String,
  setValue: {
    type: Function,
    default: () => {},
  },
})

let value = null;

const handleInput = function (event) {
  const tar = event.target;

  value = tar.value;
}

const handleBlur = function () {
  const setValue = props.setValue;

  // 失去焦点，传出值
  setValue(value);
}

// 阻止冒泡
const inputClick = function (e) {
  e.target.focus();
  e.stopPropagation();
}

</script>

<style lang="scss" scoped>
.input {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  border: 1px solid orange;
}
.input:focus {
  outline: none;
  border: 1px solid skyblue;
}
</style>